Estoy tratando de configurar matMenuTriggerFor]="getMenuName(menuItem)" dinámicamente, esto es lo que estoy intentando:
<button mat-icon-button [matMenuTriggerFor]="getMenuName(menuItem)"> <mat-icon>{{ menuItem.icon }}</mat-icon> </button> <mat-menu #navmenu="matMenu"> <button mat-menu-item> <mat-icon>dialpad</mat-icon> <span>Redial</span> </button> <button mat-menu-item disabled> <mat-icon>voicemail</mat-icon> <span>Check voice mail</span> </button> <button mat-menu-item> <mat-icon>notifications_off</mat-icon> <span>Disable alerts</span> </button> </mat-menu> getMenuName(menuItem) { console.log(menuItem); return 'navmenu'; } Se muestra correctamente, pero cuando hago clic en el botón, aparece el error core.js:6150 ERROR TypeError: Cannot read property 'createEmbeddedView' of undefined .
Por favor ayuda como puedo hacer eso.
Simplemente devuelve una cadena para su disparador de menú, lo que realmente necesita hacer es devolver el componente en sí, puede hacerlo haciendo referencia al panel de menú con ViewChild y devolverlo en su función así
@ViewChild("menu") menu: MatMenuPanel; getMenu() { return this.menu; }Ejemplo de trabajo: https://stackblitz.com/edit/angular-vs5ha5?file=src%2Fapp%2Fmenu-overview-example.ts
su getMenuName() simplemente devuelve una cadena. que no es un argumento deseado para la directiva [matMenuTriggerFor] . Debe establecer la referencia de MatMenu como un valor para la directiva matMenuTriggerFor .
En su código puedo ver que ha exportado matMenu a la variable tamplate llamada navmenu .
ahora, para adjuntar dinámicamente este menú con su disparador, debe tomar la referencia de este menú de navmanu dentro de su clase de componente usando el decorador @ViewChild .
Entonces, en su componente, declare una variable de la siguiente manera.
@ViewChild('navmenu', {static: true}) navMenu:MatMenu; Tenga en cuenta que aquí hemos utilizado la propiedad static: ture . Porque queremos acceder a nuestro MatMenu de forma dinámica mientras se renderiza el templete. lea más sobre esto aquí: https://stackoverflow.com/a/56359612/1160236
Ahora devuelve este navMenu desde tu método getMenuName() .
getMenuName(menuItem) { console.log(menuItem); return this.navMenu; } Nota. Puede cambiar el nombre de este método a getMenu() ya que estamos devolviendo el objeto de menú completo y no solo su nombre.
Consulte la demostración de stackblitz aquí: https://stackblitz.com/edit/angular-qhzq8v?file=src/app/menu-overview-example.ts